<template>
  <section class="box-patent">
		<client-only>
			<div class="patent-content">
				<div class="patent-title">证书资质</div>
				<div class="pc">
					<swiper class="patent-swiper" :options="swiperOption">
						<swiper-slide class="patent-swiper-slide" v-for="(val, index) in 4" :key="index">
							<div class="patent-swiper-slide-item" v-for="(item, key) in 4" :key="key">
								<img :src="require(`@/static/patent/patent_${index}${key}.jpg`)">
							</div>
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="mobile">
					<swiper class="patent-swiper" :options="swiperOption">
						<swiper-slide class="patent-swiper-slide" v-for="(val, index) in 16" :key="index">
							<img :src="require(`@/static/patent/patent_${parseInt(index/4)}${index%4}.jpg`)">
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
			</div>
		</client-only>
	</section>
</template>
<script>
export default {
	data () {
		return {
			swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 3000
        },
        loop: true
			}
		}
	}
}
</script>
<style lang="sass" scoped>
.titleStyle
  width: 100%
  margin: 0 auto
  text-align: center
  margin: 60px auto 48px
  color: #282C32
  font-size: 32px
  font-weight: 400
.knowMoreBtn
  width: 380px
  height: 44px
  border-radius: 4px
  border-color: rgba(48, 54, 64, 0.15)
  border-width: 1px
  border-style: solid
  line-height: 44px
  text-align: center
  color: rgba(48, 54, 64, 0.7)
  margin: 0 auto
.box-patent
	@media screen and (min-width: 750px)
		height: 620px
		min-width: 1180px
	@media screen and (max-width: 750px)
		height: 130vw
	.patent-content
		@media screen and (min-width: 750px)
			width: 1180px
		@media screen and (max-width: 750px)
			width: 100vw
		margin: 0 auto
		.patent-title
			@extend .titleStyle
			margin-top: 80px
			margin-bottom: 48px
			@media screen and (max-width: 750px)
				width: 100vw
				text-align: center
				margin: 24px auto 18px
				color: #282C32
				font-size: 28px
				font-weight: bolder
				margin-top: 20px
				margin-bottom: 16px
		.pc
			@media screen and (max-width: 750px)
				display: none
			.patent-swiper
				width: 1180px
				height: 450px
				.patent-swiper-slide
					width: 1180px
					height: 378px
					display: flex
					flex-direction: row
					justify-content: space-around
					.install-swiper-slide-item
						width: 280px
						height: 378px
						img
							width: 280px
							height: 378px
		.mobile
			@media screen and (min-width: 750px)
				display: none
			.patent-swiper
				width: 70vw
				height: 110vw
				margin-left: 15vw
				.patent-swiper-slide
					width: 70vw
					img
						width: 70vw
</style>
<style lang="sass">
.patent-swiper
  .swiper-pagination
    .swiper-pagination-bullet-active
      background: #F57033
</style>
